<template>
	<view class="AIContMenu" :style="{ height: webStyle.height }">
		<view class="menu-left" :style="{ 'padding-top': inf0Pt + 'vh' }">
			<view class="back-box">
				<image class="back" @click="back" :src="imgPath + 'AICont/back-arrow.svg'" mode="widthFix"></image>
			</view>
			<view class="menu-list">
				<view :class="['item', leftDataInd == index ? 'ac' : '']" @tap="changeLeftDataInd(item, index)" v-for="(item, index) in leftData" :key="index">
					<view class="text">
						{{ item.name }}
					</view>
					<view class="dot">·</view>
				</view>
			</view>
		</view>
		<view class="menu-right" :style="{ 'padding-top': inf0Pt + 'vh' }">
			<view class="card-list">
				<view :class="['item', rightDataInd == -1 ? 'ac' : '']" @tap="changeRightDataInd(null, -1)">
					<view class="left">
						<view class="dot-big"></view>
					</view>
					<view class="right">
						<view class="title">
							<view class="text">{{ "创建智能体" }}</view>
						</view>
						<view class="desc">
							<view class="text">{{ "属于自己独一无二的智能体!!!" }}</view>
						</view>
						<view class="footer">
							<view class="f-l"></view>
							<view class="f-r">
								<view class="toAICont" @tap="createRightData">创 建</view>
							</view>
						</view>
					</view>
				</view>
				<template v-if="rightData.length <= 0">
					<view class="k-pic">
						<image class="pic" :src="imgPath + 'index/kongPage.svg'" mode=""></image>
						<view class="tips">暂无智能体</view>
					</view>
				</template>
				<template v-if="rightData.length > 0">
					<view :class="['item', rightDataInd == index ? 'ac' : '']" @tap="changeRightDataInd(item, index)" v-for="(item, index) in rightData" :key="index">
						<view class="left">
							<view class="dot-big"></view>
						</view>
						<view class="right">
							<view class="title">
								<view class="text">{{ item.name }}</view>
							</view>
							<view class="desc" v-if="item.shareSourceInfoVo && item.shareSourceInfoVo.reqPhone">
								<view class="text">分享者：{{ item.shareSourceInfoVo.reqPhone }}</view>
								<!-- <view class="text">分享者：{{ item.shareSourceInfoVo.terUsername }}</view> -->
							</view>
							<view class="desc">
								<view class="text">{{ item.describe }}</view>
							</view>
							<view class="footer">
								<view class="f-l">
									<view class="fl-item see">
										<image class="icon" :src="imgPath + 'AICont/see.svg'" mode=""></image>
										<view class="text">
											{{ item.see }}
										</view>
									</view>
									<view class="fl-item comment">
										<image class="icon" :src="imgPath + 'AICont/comment.svg'" mode=""></image>
										<view class="text">
											{{ item.comment }}
										</view>
									</view>
								</view>
								<view class="f-r">
									<!-- <view class="toAICont" v-if="leftDataInd == 0" @tap="openSearchSharerPopup(item, index)">分 享</view> -->
									<view class="toAICont" @tap="toAIChat(item, index)">对 话</view>
								</view>
							</view>
						</view>
						<view class="share" v-if="leftDataInd == 0" @tap="openSearchSharerPopup(item, index)">
							<image class="icon" :src="imgPath + 'AICont/share.svg'" mode="widthFix"></image>
						</view>
					</view>
				</template>
			</view>
		</view>

		<uni-popup v-if="1" ref="searchSharer" type="dialog">
			<uni-popup-dialog ref="searchSharerDialog" :focus="false" mode="input" title="选择分享人" value="" placeholder="请输入分享人手机号码" :showClose="true" @confirm="searchSharerConfirm"></uni-popup-dialog>
		</uni-popup>

		<uni-popup ref="selectSharer" type="bottom" border-radius="3vw 3vw 0 0" style="z-index: 9999" background-color="#222224" @change="changeSharerPopupShow">
			<view class="popup-view">
				<view class="popup-title">选择分享人</view>
				<view class="popup-main" style="height: auto; max-height: 52vh">
					<view class=""></view>
					<view class="sharerList">
						<view class="item" v-for="(item, index) in sharerList" :key="item.secretStr" @tap="selectSharerItem(item, index)">
							{{ item.terUsername }}
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { tools } from "../../utils/util";
import * as api from "@/api/createVideo.js";
export default {
	name: "AIContMenu",
	data() {
		return {
			imgPath: tools.imgPath,
			inf0Pt: 0,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			userInfo: {},
			leftDataInd: 0,
			leftData: [],
			rightDataInd: 0,
			rightData: [],
			sharerPopupShow: false,
			sharerPhone: "",
			sharerList: []
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			this.userInfo = JSON.parse(uni.getStorageSync("userInfo") || {});
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 4.5;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 选择分享者
		async selectSharerItem(item, index) {
			console.log(item, index);
			uni.showLoading({
				title: "请稍后..."
			});
			let res = await api.postChatShare(
				{
					agentId: this.rightData[this.rightDataInd].id
				},
				{
					header: {
						Authorization: this.userInfo.token,
						Accept: "application/json, text/plain, */*",
						"secret-agent": item.secretStr
					}
				}
			);
			this.$refs.selectSharer.close();
			uni.hideLoading();
			if (!res) return;
			setTimeout(() => {
				tools.easyToast("分享成功!");
			}, 500);
		},
		// 初始化分享者列表
		async initSharerList() {
			let res = await api.getChatSharerList({
				phone: this.sharerPhone
			});
			this.sharerPhone = "";
			if (!res || !res.data) return;
			this.sharerList = Object.entries(res.data).map(([key, val]) => val);
			// this.sharerList = [
			// 	{
			// 		terUsername: "影友_qF9NWn",
			// 		terIphone: "158204xxxxx",
			// 		secretStr: "5f95ed1dRgT2d53RgT48b2RgTb3c6RgT271e13b47251"
			// 	}
			// ];
		},
		// 搜索分享者列表
		async searchSharerConfirm(val) {
			this.sharerPhone = val;
			uni.showLoading({
				title: "请稍后..."
			});
			await this.initSharerList();
			uni.hideLoading();
			if (this.sharerList.length == 0) {
				tools.easyToast("该用户未注册!");
				return;
			}
			this.$refs.searchSharer.close();
			this.openSharerPopup();
		},
		// 用户选择框弹出
		openSharerPopup(item, index) {
			this.$refs.selectSharer.open();
		},
		// 用户搜索框弹出
		openSearchSharerPopup(item, index) {
			this.$refs.searchSharer.open();
		},
		// 监听用户选择框弹出状态
		changeSharerPopupShow(e) {
			this.sharerPopupShow = e.show;
		},
		// 查询left菜单
		async getLeftData() {
			let res = await api.getChatCreatScirept();
			if (!res || !res.data) {
				this.leftData = [];
				return;
			}
			this.leftData = res.data;
			let ind = 0;
			let AIContMenuInfo = uni.getStorageSync("AIContMenuInfo");
			if (AIContMenuInfo) {
				ind = AIContMenuInfo.leftDataInd;
				uni.removeStorageSync("AIContMenuInfo");
			}
			this.changeLeftDataInd(this.leftData[ind], ind);
		},
		// 切换left菜单ac
		async changeLeftDataInd(item, index) {
			this.leftDataInd = index;
			if (index == -1) return;
			let res = await api.getChatCreatScireptById({
				id: item.id
			});
			if (!res || !res.data) {
				this.rightData = [];
				return;
			}
			this.rightData = res.data.map((e) => {
				return {
					...e,
					name: e.agentNameCn,
					describe: e.agentDescription,
					see: e.logicStatus,
					comment: e.isolationType,
					isLove: false
					// shareSourceInfoVo: {
					// 	terIphone: "158****5536",
					// 	terUsername: "123213"
					// }
				};
			});
		},
		// 跳转ai创建
		createRightData() {
			this.toPage("/pages/AIChatCreate/AIChatCreate");
		},
		// 切换right菜单ac
		changeRightDataInd(item, index) {
			this.rightDataInd = index;
		},
		// 跳转ai文案
		toAICont() {
			uni.setStorageSync("AIContInfo", {
				ids: [this.rightData[this.rightDataInd].id]
			});
			this.toPage("/pages/AICont/AICont");
		},
		// 跳转ai对话
		toAIChat(item, index) {
			uni.setStorageSync("agentItem", item);
			this.toPage("/pages/AIChat/AIChat?");
		}
	},
	onLoad(option) {
		this.initSystemInfo();
		this.getLeftData();
		// this.initSharerList();
	},
	onShow() {}
};
</script>

<style lang="scss">
.AIContMenu {
	background: #16181e;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	// background: radial-gradient(#034748 0%, #010c1f 100%);
	// background: radial-gradient(#117d62 0%, #010c1f 100%);
	box-sizing: border-box;
	display: flex;
	color: #fff;
	--border-style: 3px solid #070709;
	--cell-height: 14vw;

	.menu-left {
		border-right: var(--border-style);
		display: flex;
		flex-direction: column;
		width: 25%;
		overflow: hidden;

		.back-box {
			width: 100%;
			height: var(--cell-height);
			border-bottom: var(--border-style);
			box-sizing: border-box;
			padding-left: 5vw;
			.back {
				width: 6vw;
			}
		}
		.menu-list {
			width: 100%;
			flex: 1;
			overflow: auto;
			.item {
				width: 100%;
				height: var(--cell-height);
				border-bottom: var(--border-style);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				&.ac {
					background: #00997f;
					.dot {
						display: block;
					}
				}
				.text {
					font-size: 4.2vw;
				}
				.dot {
					font-size: 10vw;
					line-height: 0.86vw;
					display: none;
				}
			}
		}
	}
	.menu-right {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		.card-list {
			width: 100%;
			flex: 1;
			overflow: auto;
			box-sizing: border-box;
			padding-top: var(--cell-height);
			display: flex;
			flex-direction: column;
			.k-pic {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				flex: 1;
				.pic {
					width: 68%;
				}
				.tips {
					margin-top: -16vw;
					color: #fff;
					font-size: 3.5vw;
				}
			}
			.item {
				display: flex;
				width: 100%;
				border-bottom: var(--border-style);
				box-sizing: border-box;
				padding: 3vw 0vw;
				position: relative;

				&.ac {
					border: 2px solid #4d7ef9;
					background: linear-gradient(130deg, #00997f -200%, transparent);
					border-right: none;
					.left {
						.dot-big {
							background: rgba(243, 173, 51, 1);
						}
					}
					.right {
						.title {
							.text {
								color: rgba(0, 153, 127, 1);
							}
						}
					}
				}

				.left {
					--dot-size: 3vw;
					width: 10vw;
					display: flex;
					justify-content: center;
					box-sizing: border-box;
					padding-top: 2vw;
					.dot-big {
						box-sizing: border-box;
						border-radius: 50%;
						border: 2px solid rgba(243, 173, 51, 1);
						width: var(--dot-size);
						height: var(--dot-size);
					}
				}

				.right {
					flex: 1;
					color: rgba(187, 187, 187, 1);
					.title {
						.text {
							font-size: 3.5vw;
						}
					}
					.desc {
						margin: 2vw 0vw;
						.text {
							font-size: 2.5vw;
						}
					}
					.footer {
						display: flex;
						justify-content: space-between;
						align-items: center;
						.f-l {
							display: flex;
							.fl-item {
								display: flex;
								align-items: center;
								margin-right: 5vw;
								&.comment {
									.icon {
										width: 3.6vw;
										max-height: 3.6vw;
									}
								}
								.icon {
									width: 4vw;
									max-height: 4vw;
									margin-right: 1.6vw;
									display: block;
								}
								.text {
									font-size: 3vw;
								}
							}
						}
						.f-r {
							padding-right: 2vw;
							display: flex;
							.toAICont {
								font-size: 2.86vw;
								display: flex;
								justify-content: center;
								align-items: center;
								flex-direction: column;
								opacity: 1;
								border-radius: 100vw;
								margin-right: 3vw;
								background: linear-gradient(223.28deg, #06d4b8 0%, #a1f071 99.72%);
								background: #00997f;
								box-sizing: border-box;
								padding: 1.6vw 3vw;
								color: #fff;
							}
						}
					}
				}

				.share {
					position: absolute;
					top: 2vw;
					right: 5vw;

					.icon {
						width: 5vw;
						max-height: 5vw;
					}
				}
			}
		}
	}

	.popup-view {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding: 5vw;
		overflow: auto;
		.text-box {
			margin-bottom: 5vw;

			.text1 {
				color: #fff;
				font-size: 4vw;
			}

			.text2 {
				margin-top: 2vw;
				font-size: 3vw;
				color: #7c7c7c;
			}
		}
		.btns {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.btn {
				// width: 46.8%;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 15vw;
				margin: 5.2vw 0vw;
				border-radius: 2.5vw;
				font-weight: bold;
				&:nth-child(1) {
					margin-right: 1vw;
				}
			}
			.style1 {
				background: #313133;
				color: #fff;
			}
			.style2 {
				background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
				color: #000;
				margin-left: 1vw;
			}
		}

		.popup-title {
			padding-top: 5vw;
			color: #fff;
			text-align: center;
		}
		.popup-main {
			height: 68vh;
			overflow: auto;
			box-sizing: border-box;
			padding: 2vw;
			.sharerList {
				.item {
					background: rgba(126, 126, 126, 0.186);
					box-sizing: border-box;
					padding: 5vw;
					border-radius: 2.5vw;
					width: 100%;
					margin-bottom: 3vw;
					color: #fff;
					font-size: 3.68vw;
					font-weight: 100;
					text-indent: 2em;

					&.ac {
						border: 1vw solid #98c379;
					}
				}
			}
			.opt-list {
				.item {
					width: 100%;
					margin-bottom: 6vw;
					.title {
						color: #fff;
						font-size: 3.68vw;
						font-weight: 100;
					}
					.slider {
					}
				}
			}
		}
		.people-subBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(180deg, #6edc9a 0%, #05ecbd 100%);
			width: 90%;
			height: 15vw;
			margin: 5.2vw auto;
			border-radius: 2.5vw;
			color: #000;
			font-weight: bold;
		}

		.audio-list {
			// flex: 1;
			overflow: auto;
			display: -webkit-box;

			.audio-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 0vw 1vw;
				height: max-content;
				border-radius: 1.5vw;

				&.ac {
					border: 1px solid #00deb9;
				}

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					height: 100%;

					.pic-box {
						width: 20vw;
						height: 100%;
						position: relative;
						display: flex;
						justify-content: center;
						align-items: center;

						.audio-pic {
							width: 15vw;
							height: 15vw;
							display: block;
							border-radius: 50%;
						}

						.playStatusIcon {
							position: absolute;
							left: 0vw;
							top: 0vw;
							width: 100%;
							height: 100%;
							display: flex;
							justify-content: center;
							align-items: center;

							.icon {
								width: 8.6vw;
								height: 8.6vw;
								display: block;
							}
						}
					}

					.date-time {
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}

				.right {
					display: none;
					justify-content: center;
					align-items: center;
					height: 100%;

					.time {
					}

					.icon {
						width: 5vw;
						height: 5vw;
						display: block;
						padding: 0vw 3vw;
					}

					.useBtn {
						background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 100vw;
						padding: 1vw 2vw;

						.useBtn-text {
							font-size: 3.5vw;
							color: #111;
						}
					}
				}
			}
		}
	}
}
</style>
